<!--
  - Copyright (c) 2019.  武汉中科图灵科技有限公司
  - Date :  2019/1/5
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.6.2
  -->

<template>
  <el-dialog

    :visible.sync="Show" title="未启用设备"
    :fullscreen='true'
    :show-close='false'
    :close-on-press-escape="false"
    :append-to-body="true" custom-class="comlist-fulldialog">
    <!-- 自定义关闭按钮 -->
    <span class="custom-dialog-btn" @click="closeDialog">
            <i class="el-icon-close"></i>
        </span>
    <el-row style="margin-top: 20px;">
      <el-table :data="list" v-loading.body="loading" style="width: 100%">
        <el-table-column label="系列">
          <template slot-scope="scope">
            <span>{{scope.row.equipmentType}}</span>
          </template>
        </el-table-column>
        <el-table-column label="型号">
          <template slot-scope="scope">
            <span>{{scope.row.model}}</span>
          </template>
        </el-table-column>
        <el-table-column label="厂商">
          <template slot-scope="scope">
            <span>{{scope.row.manufacturer}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属系统">
          <template slot-scope="scope">
            <span>{{scope.row.channelName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属建筑">
          <template slot-scope="scope">
            <span>{{scope.row.bName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="楼层">
          <template slot-scope="scope">
            <span>{{scope.row.floor}}</span>
          </template>
        </el-table-column>
        <el-table-column label="位置">
          <template slot-scope="scope">
            <span>{{scope.row.positionDescription}}</span>
          </template>
        </el-table-column>
        <el-table-column label="位置标记">
          <template slot-scope="scope">
            <span v-if="scope.row.positionSign==='true'">已标记</span>
            <span v-else>未标记</span>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-footer>
      <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryList.page" :page-sizes="[10,15,30,40]" :page-size="queryList.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-footer>
  </el-dialog>
</template>
<script>
  import {
    getNotableList
  } from "@/api/device/realtimePoints/index";
  export default {
    props: {
      Show:{
        type:Boolean,
        default:false,
      },
      channelId:{
        required: true,
        default: ''
      },
      buildingId:{
        required:true,
        default:'',
      },
      floorId:{
        default:'',
      }
    },
    data() {
      return {
        list: [],
        loading: false,
        total:0,
        queryList: {
          page: 1,
          limit: 15
        },
      };
    },
    methods: {
      getAllData() {
        this.loading = true;
        getNotableList(Object.assign(this.queryList,{channelId:this.channelId,buildingId:this.buildingId,floor:this.floorId}))
          .then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      },
      handleSizeChange(val) {
        this.queryList.limit = val;
        this.getAllData();
      },
      handleCurrentChange(val) {
        this.queryList.page = val;
        this.getAllData();
      },
      closeDialog() {
        //当面板关闭(点击关闭按钮)
        this.$emit("update:Show", false);
      },
    },
    watch: {
      Show(val) {
        let self = this;
        if (val) {
          this.$nextTick(() => {
            self.getAllData();
          });
        } else {
          this.loading = false;
          this.$nextTick(() => {
            self.loading = false;
          });
        }
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .comlist-fulldialog{
    &>div{
      margin: 0 50px;
    }
    .el-dialog__header{
      margin-top: 30px;
      .el-dialog__title{
        font-size: 32px;
      }
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 30px;
      top: 20px;
      color: #909399;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
  }
</style>
